import React from 'react';
import {Animated, Text, View, TouchableOpacity} from 'react-native';

class FadeInView extends React.Component {
    state = {
        fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
    };

    componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.fadeAnim,            // 动画中的变量值
            {
                toValue: 1,                   // 透明度最终变为1，即完全不透明
                duration: 10000,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    }

    render() {
        let {fadeAnim} = this.state;

        return (
            <Animated.View                 // 使用专门的可动画化的View组件
                style={{
                    ...this.props.style,
                    opacity: fadeAnim,         // 将透明度指定为动画变量值
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

class TranFromInView extends React.Component {
    state = {
        anim: new Animated.Value(0),  // 透明度初始值设为0
    };

    // componentDidMount() {
    //     this.startAnim();
    // }

    startAnim = () => {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.anim,            // 动画中的变量值
            {
                toValue: 100,                   // 透明度最终变为1，即完全不透明
                duration: 3000,              // 让动画持续一段时间
                delay:500,
            }
        ).start();                        // 开始执行动画
    };

    render() {
        return (
            <Animated.View// 使用专门的可动画化的View组件
                style={{
                    ...this.props.style,
                    //设置translateX为动画值，这样动画执行的时候，translateX的值也会随之改变
                    transform: [{translateX: this.state.anim}],
                }}>
                <TouchableOpacity onPress={this.startAnim}>
                    {this.props.children}
                </TouchableOpacity>
            </Animated.View>
        );
    }
}

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class Animate extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <TranFromInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
                    <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
                </TranFromInView>
            </View>
        )
    }
}